COMO CRIAR PAGINAÇÃO
Como fazer paginação com Bootstrap?
Para fazer isso é usado a classe pagination do bootstrap.
Neste artigo será mostrado como fazer a parte do front end da paginação com Bootstrap. No final terá link para outras maneiras de fazer o front e o beck end do sistema de páginas.
A lista de páginas usadas será:
primeira<
3
4
5
>
última
Sendo página atual a 4, o sinal de maior usado para a página seguinte, o sinal de menor usado para a página anterior, "última" como a página final que será a 8 e "primeira" para a inícial.
No exemplo abaixo é mostrada a paginação simples, com a página atual em destaque e sem possibilidade de ser clicada.
<nav aria-label="bloco de páginas">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#1">primeira</a></li>
<li class="page-item"><a class="page-link" href="#3"><</a></li>
<li class="page-item"><a class="page-link" href="#3">3</a></li>
<li class="page-item active disabled"><a class="page-link" href="#4">4</a></li>
<li class="page-item"><a class="page-link" href="#5">5</a></li>
<li class="page-item"><a class="page-link" href="#6">></a></li>
<li class="page-item"><a class="page-link" href="#8">última</a></li>
</ul>
</nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#1">primeira</a></li>
<li class="page-item"><a class="page-link" href="#3"><</a></li>
<li class="page-item"><a class="page-link" href="#3">3</a></li>
<li class="page-item active disabled"><a class="page-link" href="#4">4</a></li>
<li class="page-item"><a class="page-link" href="#5">5</a></li>
<li class="page-item"><a class="page-link" href="#6">></a></li>
<li class="page-item"><a class="page-link" href="#8">última</a></li>
</ul>
</nav>
O aria-label é necessário para usar mais um bloco de paginação na página.
O active é usado para mudar o estilo da página atual.
Se a página atual fosse a 8 poderia ser usado a classe disabled para inativar o clique no link última e próximo. O mesmo poderia ser feito quanto estivesse na primeira. Ficando assim:
<li class="page-item disabled"><a class="page-link" href="#8">></a></li>
<li class="page-item disabled"><a class="page-link" href="#8">última</a></li>
<li class="page-item disabled"><a class="page-link" href="#8">última</a></li>
Para definir o tamanho dos botões pode se usar a classe de pagination seguida do tamanho que pode ser lg para grande e sm para pequeno. Ficando assim:
<ul class="pagination pagination-lg">
ou
<ul class="pagination pagination-sm">
Para alinhar o bloco de botões pode ser usado a classe de alinhamento junto a classe pagination.
Algo como:
<ul class="pagination pagination-sm justify-content-center">
Veja mais em:Como fazer paginação com php e mysql?
Como fazer leiaute de paginação com CSS?
O que é paginação de um site?
O que é Bootstrap?
Como aplicar estilo css nos botões de paginação?
Basta usar um css simples como esse aqui:
<!-- Primeiro é construída a lista com a classe pagination -->
<ul class="pagination">
<!-- Abre a primeira linha da lista -->
<li>
<!-- Insere o link para a página 1 com o texto de duas setas, algo meio padrão na web -->
<a href="https://diretoaoponto-tech.com.br/?p=1" target="_self">«</a>
<!-- Fecha a primeira linha -->
</li>
<!-- Inicia a próxima linha -->
<li>
<!-- Coloca um link sem href apenas com a classe active, pois é a página atual, e o texto 1 -->
<a class="active">1</a>
<!-- Fecha a linha -->
</li>
<!-- Abre a linha para o botão 2 -->
<li>
<!-- Insere o link para a página dois com o texto "2" -->
<a href="https://diretoaoponto-tech.com.br/?p=2">2</a>
<!-- Fecha a linha -->
</li>
<!-- Abre a linha para a última página. -->
<li>
<!-- com as setas apontadas para a direita. Nesse caso a última página é a 2 mesmo -->
<a href="https://diretoaoponto-tech.com.br/?p=2" target="_self">»</a>
<!-- Fecha a última linha-->
</li>
<!-- Fecha a lista-->
</ul>
Ficando assim:
Agora é feito o CSS para colocar o estilo.
/** Abre a configuração de estilo CSS **/
<style rel="stylesheet" scoped="scoped" type="text/css">
ul.pagination { /** Inicia a configiração da lista pagination**/
display: inline-block; /** Inicia uma nova linha e espande para esquerda **/
padding: 0; /** Retira o espaço interno da lista **/
}
ul.pagination li { /** Inicia a configuração da linha da lista **/
display: inline; /** Deixa uma linha do lado da outra **/
}
ul.pagination li a{ /** Coloca o estilo no botão que tem link a **/
color: black; /** Fonte preta **/
float: left; /** Alinha a esquerda **/
padding: 8px 16px; /** Adiciona espaço na linha **/
text-decoration: none; /** Tira decoração do texto **/
}
ul.pagination li a.active { /** Coloca o estilo no link com a classe active **/
background-color: blue; /** Define uma cor de fundo para o botão da página atual **/
color: white; /** A cor da fonte também **/
}
ul.pagination li a:hover:not(.active) {/** Insere o estilo para quando o mouse passar por cima do link exeto no botão da página atual **/
background-color: #ddd; /** Insere um tom de cinza **/
}
</style>
/** Fecha a configuração de estilo **/
Ficando assim:
Nesse código tem um pequeno exemplo de todos os efeitos comuns em botões de página.
Como criar paginação PHP com mysql?
De uma maneira simples para explicar é usado o mysqli
Veja o exemplo abaixo:<?php //Inicia o código PHP.
include "conectar.php"; //Chama o arquivo com a conexão ao banco.
$p = $_REQUEST["p"]; // Pegar a página atual por GET.
// Verifica se a variável tá declarada, senão deixa na primeira página como padrão.
if(isset($p)) { $p = $p; } else { $p = 1; }
// Defina aqui a quantidade máxima de registros por página.
$qnt = 20; //No caso 20 por página.
// O sistema calcula o início da seleção, calculando:
// (página atual * quantidade por página) - quantidade por página
$inicio = ($p*$qnt) - $qnt;
// Seleciona no banco de dados com o LIMIT indicado pelos números acima.
$sql_select = "select * FROM tabela limit $inicio, $qnt";
// Executa a query com mysqli.
$sql_query = mysqli_query($conn,$sql_select);
// Faz uma nova seleção no banco de dados semelhante a anterior, mas desta vez sem LIMIT, para pegarmos o número total de registros.
$sql_select_all = "select * FROM tabela";
// Executa a query das seleções acima.
$sql_query_all = mysqli_query($conn,$sql_select_all);
// Gera uma variável com o número total de registros no banco de dados.
$total_registros = mysqli_num_rows($sql_query_all);
$num_rows = ($total_registros);
// Gera outra variável, desta vez com o número de páginas que será precisa.
// O comando ceil() arredonda "para cima" o valor.
$pags = ceil($total_registros/$qnt);
echo ' //Inicia o texto que será impresso na tela.
<div id="dados">//Inicia uma div com a class dados.
<table> //Inicia uma tabela.
<tr> //Cria a linha da tabela.
<th></th>//Espaço vazio pois é a primeira linha e primeira coluna.
//Cria o título do primeiro campo.
<th class="titulo">Código</th>
//Cria o título do segundo campo.
<th class="titulo">Descrição</th>
</tr>';//Fecha a linha dos títulos.
// Cria um while para pegar as informações do BD para os itens.
while ($row = $sql_query->fetch_array(MYSQLI_ASSOC)) {
echo '//Inicia a tabela com dados dinâmicos.
<tr>
//Chama o campo código.
<td class="item" style="text-align:center; padding:2px; vertical-align: middle; display: ">' . $row['codigo'] .'</td>
//Chama o campo descrição.
<td class="item" style="text-align:center; padding:5px;">' . $row['descricao'] .'</td>
</tr>';
}//Fecha o while.
?>//Fecha o PHP.
</table>
</div>//Acima fecha a tabela e aqui fecha a div.
<?php //Abre novamente o PHP.
if($pags > 1){ //Verifica se tem mais de uma página.
// Número máximos de botões de paginação.
$max_links = 3;
// Exibe o primeiro link "primeira página", que não entra na contagem acima(3).
echo '<a href="https://diretoaoponto-tech.com.br?p=1" target="_self">primeira página</a> ';
// Cria um for() para exibir os 3 links antes da página atual.
for($i = $p-$max_links; $i <= $p-1; $i++) {
// Se o número da página for menor ou igual a zero, não faz nada.
if($i >= 1){//Então chama o link se for 1 ou maior.
//Cria o link com o número do indice.
echo '<a href="https://diretoaoponto-tech.com.brp='.$i.'" target="_self">'.$i.'</a> ';
}//Fecha o if.
}//Fecha o for.
// Exibe a página atual, sem link, apenas o número
echo $p." ";
// Cria outro for(), desta vez para exibir 3 links após a página atual.
for($i = $p+1; $i <= $p+$max_links; $i++) {
// Verifica se a página atual é maior do que a última página. Se for, não faz nada.
if($i > $pags) {
//faz nada.
}
// Se tiver tudo Ok gera os links.
else {
echo '<a href="https://diretoaoponto-tech.com.br?p='.$i.'" target="_self">'.$i.'</a> ';
}
}
// Exibe o link "última página"
if($pags <= 0){
$i=1;
}
else{
$i=$pags;
}
echo '<a href="https://diretoaoponto-tech.com.br?p='.$i.'" target="_self">última página</a> ';
}
echo '</div>';
?>
</div>//Fecha a div inicial.
Pronto tem aí um exemplo de paginação com PHP simples e funcional. O html pode ser estilizado com o css como mostra esse link: CSS para paginação.
